<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      echartsTwoData: [
        { value: 1048, name: "工作中", itemStyle: { color: "#307ff9" } },
        { value: 735, name: "未工作", itemStyle: { color: "#30e583" } },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "10%",
          itemGap: 15,
          data: this.echartsTwoData,
          formatter: (name) => {
            let target;
            for (let i = 0; i < this.echartsTwoData.length; i++) {
              if (this.echartsTwoData[i].name === name) {
                target = this.echartsTwoData[i].value;
              }
            }
            // let arr=["{a|"+target+"}","{b|"+name+"}"]
            let arr = [name + "(辆)" + "    " + "{b|" + target + "}"];
            return arr.join("\n");
          },
          textStyle: {
            rich: {
              b: {
                fontSize: 20,
                // color:'red',
                fontFamily: "myFirstFont",
              },
            },
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            selectedMode: "single",
            radius: [0, "40%"],
            center: ["50%", "40%"],
            itemStyle: {
              color: "#fff",
            },
            label: {
              // normal: {
              show: true,
              color: "#fff",
              position: "center",
              fontSize: "20px Microsoft YaHei",
              formatter: function (a) {
                return "{top|" + a.value + "}" + "\n" + "{down|" + a.name + "}";
              },
              // },
              rich: {
                top: {
                  fontSize: 36,
                  fontFamily: "myFirstFont",
                  color: "#000",
                },
                down: {
                  fontSize: 14,
                  color: "#ccc",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 1660, name: "机械总数" }],
          },
          {
            type: "pie",
            radius: ["50%", "60%"],
            center: ["50%", "40%"],
            // legendHoverLink:false,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },

            labelLine: {
              show: false,
            },
            data: this.echartsTwoData,
          },
          {
            name: "统计",
            type: "gauge",
            splitNumber: 20, //刻度数量
            min: 0,
            max: 100,
            radius: "78%", //图表尺寸
            center: ["50%", "40%"],
            startAngle: 90,
            endAngle: -270,
            axisLine: {
              show: true,
              lineStyle: {
                width: 0,
                shadowBlur: 0,
                color: [
                  [0, "#0dc2fe"],
                  [1, "#0dc2fe"],
                ],
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: "#0dc2fe",
                width: 2,
              },
              length: 6,
              splitNumber: 3, //密度
            },
            splitLine: {
              show: true,
              length: 6,
              lineStyle: {
                color: "#0dc2fe",
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              //仪表盘指针
              show: 0,
            },
            detail: {
              borderColor: "#fff",
              shadowColor: "#fff", //默认透明
              shadowBlur: 2,
              offsetCenter: [0, "0%"], // x, y，单位px
              textStyle: {
                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: "#fff",
                fontSize: 50,
              },
              formatter: "{value}",
            },
          },
          //   {
          //     name: "",
          //     type: 'gauge',
          //     splitNumber: 50, //刻度数量
          //     min: 0,
          //     max: 70,
          //     radius: '78%', //图表尺寸
          //     center: ['50%', '40%'],
          //     startAngle: 120,
          //     endAngle: -240,
          //     axisLine: {
          //         show: false,
          //         lineStyle: {
          //             width: 0,
          //             shadowBlur: 0,
          //             color: [
          //                 [1, '#0dc2fe']
          //             ]
          //         }
          //     },
          //     axisTick: {
          //         show: false,
          //         lineStyle: {
          //             color: 'auto',
          //             width: 0.1
          //         },
          //         length: 10,
          //         splitNumber: 10
          //     },
          //     splitLine: {//刻度的长度
          //         show: true,
          //         length: 6,
          //         lineStyle: {
          //             color: 'auto',
          //         }
          //     },
          //     axisLabel: {
          //         show: false
          //     },
          //     pointer: { //仪表盘指针
          //         show: 0,
          //     },
          //     detail: {
          //         show: 0,
          //     },
          // },
        ],
      });
    },
  },
};
</script>
